import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, SideBar } from 'antd-mobile';
import './wlgz.css'
import { Steps } from 'react-vant';

const Wlgz = () => {
    const navigate = useNavigate();
    //本地存储获取商品
    const [list, setlist] = useState([]);
    useEffect(() => {
        const imgs = localStorage.getItem('item')
        setlist(JSON.parse(imgs))
    }, [])
    //快递路径
    const cate = [
        {
            "title":'您的快递已签收，签收人张晓伟。签收地址：河北科技学院',
            "time":'2025-2-21 11:32'
        },
        {
            "title":'您的快件已到达河北科技学院',
            "time":'2025-2-20 20:21'
        },
        {
            "title":'您的快件已到达保定，请耐心等待',
            "time":'2025-2-20 15:32'
        },
        {
            "title":'您的快件已到达北京，请耐心等待',
            "time":'2025-2-19 11:32'
        },
        {
            "title":'您的快件已发货',
            "time":'2025-2-18 11:32'
        },
        {
            "title":'您的快件正在出库',
            "time":'2025-2-17 11:32'
        },
        {
            "title":'您的快件打包',
            "time":'2025-2-16 11:32'
        },
        {
            "title":'您的快件已下单',
            "time":'2025-2-15 11:32'
        }
    ]
    return (
        <div>
            <NavBar onBack={() => navigate(-1)} className='qbfl-nav' style={{ background: "red", color: 'white' }}>物流跟踪</NavBar>
            <div className='wlgz-div'>
                <img src={list.img} alt="" className='wlgz-img' />
                <div className='wlgz-div1'>
                    <p className='wlgz-p1'>{list.name}</p>
                    <p className='wlgz-p2'>{list.name}</p>
                    <p>圆通快递：{list._id}</p>
                </div>
            </div>
            <Steps direction="vertical" active={0} className='wlgz-steps'>
                {cate.map((item,index)=>{
                    return(
                        <Steps.Item key={index} className='wlgz-steps-item'>
                            <h3>{item.title}</h3>
                            <p>{item.time}</p>
                        </Steps.Item>
                    )
                })}
            </Steps>
        </div>
    )
}
export default Wlgz;